<template>
  <div>
    <div
      class="w-[350px] border border-gray-200 bg-white p-3 shadow-md rounded-lg"
      @click="openDrawer"
    >
      <Handle type="target" :position="Position.Left" />
      <div class="flex flex-col gap-y-1">
        <common-title-module />
        <CommonDisplayModule title="输入" value-name="vartype" :valueList="data.inoutlist" />
        <CommonDisplayModule title="输出" value-name="vartype" :valueList="data?.commonoutvo" />
        <CommonDescModule title="提问内容" value-name="vartype" :question="data.content" />
        <CommonSelectModule
          title="问答类型"
          value-name="vartype"
          :valueList="data.setoption === 'fixed' ? data.fixedlist : [data.dynamicvo]"
          :type="data.answertype"
        />
      </div>
      <Handle
        v-if="data.answertype === QA_TYPE_OPTIONS[0].value"
        type="source"
        :position="Position.Right"
      />
    </div>
    <QADrawerModule
      ref="drawerRef"
      :title="node?.node?.label"
      :form="data"
      :QA_TYPE_OPTIONS="QA_TYPE_OPTIONS"
      :SETOPTION_OPTIONS="SETOPTION_OPTIONS"
      @add="handleClickAddBtn"
      @remove="handleClickDeleteBtn"
      @update="handleUpdate"
      @cancel="onCancel"
    />
  </div>
</template>
<script setup>
import { ref } from 'vue'
import { Handle, Position, useNode, useVueFlow } from '@vue-flow/core'

import { editNode } from '@/api/modules/flow'

import CommonTitleModule from '../modules/common-title-module.vue'
import CommonDisplayModule from '../modules/common-display-module.vue'
import CommonDescModule from '../modules/common-desc-module.vue'
import CommonSelectModule from '../modules/common-select-module.vue'

import QADrawerModule from '../modules/QA-drawer-module.vue'

const QA_TYPE_OPTIONS = [
  {
    label: '直接回答',
    value: 'direct'
  },
  {
    label: '选项回答',
    value: 'option'
  }
]

const SETOPTION_OPTIONS = [
  {
    label: '固定内容',
    value: 'fixed'
  },
  {
    label: '动态内容',
    value: 'dynamic'
  }
]

const node = useNode()

const data = ref({
  selectmodel: node.node.data.selectmodel || '',
  content: node.node.data.content || '',
  answertype: node.node.data.answertype || QA_TYPE_OPTIONS[0].value,
  setoption: node.node.data.setoption || SETOPTION_OPTIONS[0].value,
  isreply: node.node.data.isreply || false,
  inoutlist: node.node.data.inoutlist || [
    {
      varname: '',
      varparam: '',
      vartype: 'String'
    }
  ],
  commonoutvo: [
    {
      varname: 'optionId',
      vartype: 'String'
    },
    {
      varname: 'optionContent',
      vartype: 'String'
    }
  ],
  fixedlist: node.node.data.fixedlist || [
    {
      sort: 'A',
      content: ''
    },
    {
      sort: 'B',
      content: ''
    }
  ],
  dynamicvo: node.node.data.dynamicvo || {
    sort: 'A-Z',
    isrequired: true,
    content: ''
  },
  outputjsonvo: {
          varname: 'USER_RESPONSE',
          varparam: '',
          vartype: 'String',
          isrequired: true,
          vardesc: '',
          descShow: false
        },
  outputjsonlist: node.node.data.outputjsonlist
    ? node.node.data.outputjsonlist.map((item) => {
        return {
          ...item,
          descShow: false
        }
      })
    : [
        {
          varname: '',
          varparam: '',
          vartype: 'String',
          isrequired: true,
          vardesc: '',
          descShow: false
        }
      ]
})

const drawerRef = ref(null)
const openDrawer = () => {
  drawerRef.value?.init()
}

function handleClickAddBtn(listKey, customNodes) {
  const nodes = customNodes || {
    varname: '',
    varparam: '',
    vartype: 'String'
  }
  data.value[listKey].push(nodes)
  node.node.data = {
    ...node.node.data,
    output: data
  }
}

function handleClickDeleteBtn(listKey, index) {
  data.value[listKey].splice(index, 1)
  node.node.data = {
    ...node.node.data,
    output: data
  }
}

const handleUpdate = (fn) => {
  fn(data.value)
}

const onCancel = () => {
  const { commonoutvo, ...params } = data.value
  editNode({
    data: {
      id: node.id,
      ...params,
      // outputjsonvo: params.outputjsonvo.map(item=>{
      //   const { descShow, ...other } = item
      //   return other
      // }), 
      outputjsonlist: params.outputjsonlist.map(item=>{
        const { descShow, ...other } = item
        return other
      })
      // commonoutvo: data.value.commonoutvo.reduce((pre, cur) => {
      //   return {
      //     ...pre,
      //     [cur.varname]: cur.vartype
      //   }
      // }, {})
    }
  })
}
</script>
